<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>PrimeFaces</title>
            </f:facet>
        </h:head>

        <h:body onload="onLoad()">
            <p:layout fullPage="true">
             
                <p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
                    <div style="float: left;">
                        <h2>SocketTalk 0.1</h2>
                    </div>
                    <div style="float: right; ">
                       <br/> Status: <div id="statusLine"/>
                    </div>
                </p:layoutUnit>
                <p:layoutUnit position="south" size="100" closable="true" collapsible="true">
                    <div style="float: left">
                        <input type="text" name="message" id="message" /> 
                        <input type="button" value="Send" onclick="sendMessage()" /> 
                    </div>
                </p:layoutUnit>
                <p:layoutUnit position="east" size="20%" header="Left" collapsible="true">
                    <p:menu>
                        <p:submenu label="Resources">
                            <p:menuitem value="Demo" url="http://www.primefaces.org/showcase-labs/ui/home.jsf" />
                            <p:menuitem value="Documentation" url="http://www.primefaces.org/documentation.html" />
                            <p:menuitem value="Forum" url="http://forum.primefaces.org/" />
                            <p:menuitem value="Themes" url="http://www.primefaces.org/themes.html" />
                        </p:submenu>
                    </p:menu>
                </p:layoutUnit> 
                <p:layoutUnit position="center">
                <!--    <p:socket onMessage="handleMessage" channel="/sk" autoConnect="true" /> -->
                <div id="contentDiv" style="float: top; height: 100%">  </div>
                </p:layoutUnit>
            </p:layout>
        </h:body>
    </f:view>
    <script type="text/javascript">
        var webSocket = new WebSocket('ws://localhost:8080/websk/ws');
        function onLoad(){
        }
        webSocket.onerror = function(event) {
            onError(event);
        };
        webSocket.onopen = function(event) {
            onOpen(event);
        };
        webSocket.onmessage = function(event) {
            onMessage(event);
        };
        function onMessage(event) {
            document.getElementById('contentDiv').innerHTML += "<br/>[SERVER]: " + event.data;
            console.log("ive got a message, and the message is clear:" + event.data);
        }
        function onOpen() {
            document.getElementById('statusLine').innerHTML = 'Connection established';
        }
        function onError(event) {
            alert(event.data);
        }
        function start() {
            webSocket.send('hello');
            return false;
        }
        function sendMessage() {
            webSocket.send(document.getElementById('message').value);
            var contentDiv = document.getElementById("contentDiv").innerHTML;
            contentDiv += ("<br/>[ME]: " + document.getElementById('message').value);
            document.getElementById("contentDiv").innerHTML = contentDiv;
            console.log("Hello sendMessage has been called!");
        }
    </script>
</html>